<template>
  <div class="app-container">
    <!-- 分页查询 -->
    <el-form
      ref="queryParams"
      :model="queryParams"
      size="small"
      label-suffix=":"
      label-position="right"
      label-width="200px"
    >
      <el-row :gutter="10">
        <el-col :span="1.5">
          <el-form-item :label="$t('goodsSKULang.skuStatus')" prop="skuStatus">
            <el-select
              v-model="queryParams.skuStatus"
              :placeholder="$t('pleaseEnter')"
              style="width: 200px"
            >
              <el-option
                v-for="item in productStatusOptions"
                :key="item.value"
                :value="item.value"
                :label="$t('statusLang.' + item.title)"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="1.5">
          <el-form-item :label="$t('depotLang.depot')" prop="depotId">
            <el-select
              v-model="queryParams.depotId"
              :placeholder="$t('pleaseSelect')"
              style="width: 200px"
            >
              <el-option
                v-for="item in depotListAllStatusList"
                :key="item.value"
                :value="item.value"
                :label="$t(item.title)"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="1.5">
          <el-form-item :label="$t('goodsSKULang.skuCode')" prop="skuCode">
            <el-input
              v-model.trim="queryParams.skuCode"
              :placeholder="$t('goodsSKULang.skuCode')"
              style="width: 200px"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="1.5">
          <el-form-item :label="$t('goodsSKULang.goodsName')" prop="goodsName">
            <el-input
              v-model.trim="queryParams.goodsName"
              :placeholder="$t('goodsSKULang.goodsName')"
              style="width: 200px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="1.5">
          <el-form-item
            :label="$t('goodsSKULang.customCode')"
            prop="customCode"
          >
            <el-input
              v-model.trim="queryParams.customCode"
              :placeholder="$t('goodsSKULang.customCode')"
              style="width: 200px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="primary"
            size="small"
            icon="el-icon-search"
            @click="handleQuery"
          >
            {{ $t("query") }}
          </el-button>
          <el-button
            type="primary"
            size="small"
            icon="el-icon-refresh-left"
            @click="handleReset"
          >
            {{ $t("reset") }}
          </el-button>
        </el-col>
      </el-row>
    </el-form>

    <!-- 数据列表 -->
    <el-table
      ref="table"
      v-loading="loading"
      :data="tableData"
      border
      class="mt-10"
    >
      <el-table-column
        :label="$t('tableIndex')"
        type="index"
        :index="indexAdd"
        align="center"
        min-width="100"
      />
      <el-table-column
        :label="$t('goodsSKULang.baseSkuInfoDTO')"
        prop="skuCode,customCode,goodsName,goodsEnDesc"
        align="left"
        min-width="200"
      >
        <template slot-scope="scope">
          <p>
            {{ $t("goodsSKULang.skuCode") + ":" }}
            <span>{{ scope.row.skuCode }}</span>
          </p>
          <p>
            {{ $t("goodsSKULang.customCode") + ":" }}
            <span>{{ scope.row.customCode }}</span>
          </p>
          <p>
            {{ $t("goodsSKULang.goodsName") }}:
            <span>{{ scope.row.goodsName }}</span>
          </p>
          <p>
            {{ $t("goodsSKULang.goodsEnDesc") }}:
            <span> {{ scope.row.goodsEnDesc }}</span>
          </p>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('goodsSKULang.customerCodeAndName')"
        prop="customerCodeAndName"
        min-width="160"
      />
      <el-table-column
        :label="$t('goodsSKULang.skuStatus')"
        prop="skuStatus"
        align="center"
        min-width="120"
      >
        <template slot-scope="scope">
          <el-tag
            v-if="scope.row.skuStatus === 0"
            type="success"
            size="medium"
          >{{ $t("statusLang.onSale") }}
          </el-tag>
          <el-tag
            v-if="scope.row.skuStatus === 1"
            type="warning"
            size="medium"
          >{{ $t("statusLang.offSale") }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        :label="
          $t('goodsSKULang.predictionGoodsWeight') +
            '(KG)' +
            '/' +
            $t('goodsSKULang.volume') +
            '(CM)'
        "
        prop="predictionGoodsWeightAndVolume"
        align="center"
        min-width="230"
      />
      <el-table-column
        :label="
          $t('goodsSKULang.depotGoodsWeight') +
            '(KG)' +
            '/' +
            $t('goodsSKULang.volume') +
            '(CM)'
        "
        prop="depotGoodsWeightAndVolume"
        align="center"
        min-width="220"
      />
      <el-table-column
        :label="$t('goodsSKULang.depotCodeAndName')"
        prop="depotCodeAndName"
        min-width="140"
      />
      <el-table-column
        :label="$t('goodsSKULang.dateInfo')"
        prop="createDate,modifiedDate"
        align="left"
        min-width="200"
      >
        <template slot-scope="scope">
          <p>
            {{ $t("createDate") }}:
            <span>{{ scope.row.createDate }}</span>
          </p>
          <p>
            {{ $t("modifiedDate") }}:
            <span>{{ scope.row.modifiedDate }}</span>
          </p>
        </template>
      </el-table-column>
      <el-table-column
        label="体积修改状态"
        prop="skuStatus"
        align="center"
        min-width="120"
      >
        <template slot-scope="scope">
          <el-tag
            v-if="scope.row.skuUpdateStatus === 0"
            type="success"
            size="medium"
          >{{ $t("statusLang.onUpdateStatus") }}
          </el-tag>
          <el-tag
            v-if="scope.row.skuUpdateStatus === 1"
            type="warning"
            size="medium"
          >{{ $t("statusLang.inUpdateStatus") }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('operation')"
        width="280"
        align="center"
        fixed="right"
      >
        <template v-slot="{ row }">
          <el-button type="text" @click="handleInfo(row)">
            {{ $t("info") }}
          </el-button>
          <el-button type="text" @click="modifyCustomEncoding(row)">
            {{ $t("modifyCustomEncoding") }}
          </el-button>
          <el-button
            v-if="row.skuStatus === productStatusDict.OFF_SALE.value"
            type="text"
            @click="handleAvailable(row)"
          >
            {{ $t("statusLang.onSale") }}
          </el-button>
          <el-button
            v-if="row.skuStatus === productStatusDict.ON_SALE.value"
            type="text"
            @click="handleUnavailabel(row)"
          >
            {{ $t("statusLang.offSale") }}
          </el-button>
          <!-- 打印 -->
          <el-button type="text" @click="handlePrintBarcode(row)">
            {{ $t("printBarcode") }}
          </el-button>
          <el-button type="text" @click="getSkuSize(row)">
            修改sku体积
          </el-button>
          <el-button type="text" @click="getSkuLogs(row)">
           体积修改日志
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 页码 -->
    <el-row type="flex" justify="end" align="middle" style="height: 60px">
      <el-pagination
        :total="total"
        layout="total,sizes,prev,pager,next,jumper"
        :page-sizes="[10, 20, 30, 50, 100, 200, 1000, 2000, 5000]"
        :current-page="queryParams.pageNo"
        :page-size="queryParams.pageSize"
        @current-change="pageNoChange"
        @size-change="handleSizeChange"
      />
    </el-row>
    <!-- 修改自定义编码 -->
    <el-dialog
      :visible.sync="editCustomCodeDialog"
      :title="$t('edit') + $t('goodsSKULang.customCode')"
      width="580px"
      @close="closeDialog('form')"
    >
      <el-form
        ref="form"
        :rules="rules"
        label-suffix=":"
        size="small"
        :model="editCustomCodeForm"
        label-width="120px"
      >
        <el-form-item :label="$t('goodsSKULang.oldCustomCode')">
          <div>
            <span>{{ customCode }}</span>
          </div>
        </el-form-item>
        <el-form-item
          :label="$t('goodsSKULang.newCustomCode')"
          prop="customCode"
        >
          <el-input v-model.trim="editCustomCodeForm.customCode" />
        </el-form-item>
      </el-form>
      <el-row type="flex" justify="end">
        <el-button type="primary" @click="handleSubmit">{{
          $t("submit")
        }}</el-button>
        <el-button @click="close">{{ $t("cancel") }}</el-button>
      </el-row>
    </el-dialog>
    <!-- 打印条码 -->
    <el-dialog
      :visible.sync="PrintBarcodeDialog"
      :title="$t('printBarcode')"
      width="580px"
    >
      <el-form
        ref="ref"
        :model="PrintBarCodeForm"
        label-width="120px"
        label-suffix=":"
      >
        <el-form-item :label="$t('goodsSKULang.skuCode')">
          <div>
            <span>{{ PrintBarCodeForm.skuCode }} </span>
          </div>
        </el-form-item>
        <el-form-item :label="$t('goodsSKULang.printNum')" prop="printNum">
          <el-input v-model.number="PrintBarCodeForm.printNum" />
        </el-form-item>
      </el-form>
      <el-row type="flex" justify="end">
        <el-button type="primary" @click="handlePrint">{{
          $t("print")
        }}</el-button>
        <el-button @click="cancel">{{ $t("cancel") }}</el-button>
      </el-row>
    </el-dialog>
    <!-- 详情 -->
    <info-form
      v-model="infoParams.locationId"
      :visible="detailDialog"
      :operation="infoParams.operation"
      :info-data="infoData"
      style="color: #000000ec"
      @close="infoClose"
    />
    <!-- 条形码 -->
    <vue-easy-print
      v-if="isShow"
      ref="easyPrint"
      table-show
      :one-page-row="onePageRow"
    >
      <div class="ewm">
        <vue-barcode
          margin="20"
          line-color="#000"
          display-value="true"
          width="3"
          format="CODE128"
          :text="text"
          font="bold"
          height="80"
          text-align="center"
          text-position="bottom"
          text-margin="15"
          font-size="26"
          class="barCode"
        />
      </div>
    </vue-easy-print>
    <el-dialog :visible.sync="skuSizeDialog" :title="title" width="580px">
      <el-form ref="form" :model="form"  label-width="80px">
        <el-form-item label="长度" prop="skuLength">
          <el-input v-model="form.skuLength" placeholder="请输入sku长度" type="number"/>
        </el-form-item>
        <el-form-item label="宽度" prop="skuWidth">
          <el-input v-model="form.skuWidth" placeholder="请输入sku宽度" type="number"/>
        </el-form-item>
        <el-form-item label="高度" prop="skuHeight">
          <el-input v-model="form.skuHeight" placeholder="请输入sku高度" type="number"/>
        </el-form-item>
        <el-form-item label="重量" prop="skuWeight">
          <el-input v-model="form.skuWeight" placeholder="请输入sku重量" type="number"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancels">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="skuSizeLogDialog" :title="title" width="780px">
      <el-table v-loading="loading" :data="skuList">
        <el-table-column label="" align="center">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="修改前体积" align="center" prop="sizes" />
        <el-table-column label="修改后体积" align="center" prop="size" />
        <el-table-column label="修改时间" align="center" prop="createTime" />
        <el-table-column label="修改人" align="center" prop="createBy" />
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import VueBarcode from 'vue-barcode'
import vueEasyPrint from 'vue-easy-print'
import to from 'await-to-js'
import InfoForm from './components/info-form.vue'
import { productStatusDict } from '@/utils/dictData'
import { getDictOptionList, getTitleByValue } from '@/utils/dictUtils'
import {
  getDepotList,
  getDepotListAllStatus
} from '@/api/business/depotManage/depot'
import {
  getSkuInfo,
  getSkuPageList,
  setStatusAvailable,
  setStatusDiscontinued,
  modifiedCustomCode,
  getSkUSize,
  updateSkuSize,
  getSkuLog
} from '@/api/business/productManage/product'

export default {
  name: 'Product',
  components: { InfoForm, VueBarcode, vueEasyPrint },
  props: {
    // 是否显示表格
    tableShow: {
      type: Boolean,
      default: false
    },
    // 每页多少行
    onePageRow: {
      type: Number,
      default: 5
    }
  },
  data() {
    return {
      isShow: false,
      text: null, // 条形码显示的内容
      infoData: {},
      skuId: null,
      loading: false,
      depotList: [], // 仓库下拉列表
      depotListAllStatusList: [], // 仓库所有状态下拉
      total: 0,
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        skuStatus: null,
        skuUpdateStatus: null,
        customCode: null,
        depotId: null,
        goodsName: null,
        skuCode: null
      },
      infoParams: {
        locationId: null,
        operation: 0
      },
      detailDialog: false,
      productStatusDict: productStatusDict,
      getTitleByValue: getTitleByValue,
      productStatusOptions: getDictOptionList(productStatusDict), // 产品状态
      tableData: [],
      skuList:[],
      editCustomCodeDialog: false,
      editCustomCodeForm: {},
      customCode: null,
      PrintBarcodeDialog: false,
      skuSizeDialog:false,
      skuSizeLogDialog:false,
      title:"",
      form:{},
      PrintBarCodeForm: {
        skuCode: null,
        printNum: 1
      },
      rules: {
        customCode: [
          {
            required: true,
            message: this.$t('pleaseEnter'),
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created() {
    this.getDepotListAllStatus()
    this.getDepotList()
    this.getSkuPageList()
  },

  methods: {
    // 所有仓库状态下拉列表
    async getDepotListAllStatus() {
      const { data } = await getDepotListAllStatus()
      this.depotListAllStatusList = data
    },
    // 仓库下拉列表
    async getDepotList() {
      const { data } = await getDepotList()
      this.depotList = data
    },
    // 获取产品列表
    async getSkuPageList() {
      const { data } = await getSkuPageList({ ...this.queryParams })
      this.tableData = data.skuInfoForPageDTOList
      // console.log(this.tableData);
      this.total = data.totalRowNum
    },
    // 查询
    handleQuery() {
      this.loading = true
      // this.queryParams.pageNo = 1
      this.getSkuPageList()
      this.loading = false
    },
    // 提交
    async handleSubmit() {
      const [err] = await to(this.$refs.form.validate())
      if (err !== null) return
      const res = await modifiedCustomCode({
        customCode: this.editCustomCodeForm.customCode,
        skuId: this.skuId,
        modifiedUser: 0
      })
      if (res.returnCode !== 10000) return
      this.$message({
        type: 'success',
        message: this.$t('handleSuccess')
      })
      this.editCustomCodeDialog = false
      this.getSkuPageList()
      this.$refs.form.resetFields()
    },
    // 在售
    async handleAvailable(row) {
      const flag = await this.$confirm(
        this.$t('statusLang.onSale') + '?',
        this.$t('hint'),
        {
          type: 'warning'
        }
      ).catch((err) => err)
      if (flag !== 'cancel') {
        const res = await setStatusAvailable({
          skuId: row.goodsId,
          modifiedUser: 0
        })
        if (!res) return
        this.$message({
          message: this.$t('handleSuccess'),
          type: 'success'
        })
        this.getSkuPageList()
      }
    },
    // 停售
    async handleUnavailabel(row) {
      const flag = await this.$confirm(
        this.$t('statusLang.offSale') + '?',
        this.$t('hint'),
        {
          type: 'warning'
        }
      ).catch((err) => err)
      if (flag !== 'cancel') {
        const res = await setStatusDiscontinued({
          skuId: row.goodsId,
          modifiedUser: 0
        })
        if (!res) return
        this.$message({
          message: this.$t('handleSuccess'),
          type: 'success'
        })
        this.getSkuPageList()
      }
    },
    // 详情
    async handleInfo(row) {
      this.infoParams.locationId = row.goodsId
      this.infoParams.operation = 0
      this.detailDialog = true
    },
    reset() {
      this.$set(this.editCustomCodeForm, 'customCode', null)
      this.$refs.form.resetFields()
    },
    // 修改自定义编码
    async modifyCustomEncoding(row) {
      this.editCustomCodeDialog = true
      this.skuId = row.goodsId
      const { data } = await getSkuInfo({
        skuId: row.goodsId
      })
      console.log(data)
      this.customCode = data.customCode
      this.reset()
    },
    // 打印
    handlePrintBarcode(row) {
      this.PrintBarcodeDialog = true
      this.PrintBarCodeForm.skuCode = row.skuCode
      this.text = row.skuCode
      this.isShow = true
      console.log(row.skuCode)
    },
    handlePrint() {
      console.log(this.$refs)
      this.$refs.easyPrint.print()
    },
    // 重置
    async handleReset() {
      await this.$refs.queryParams.resetFields()
      this.getSkuPageList()
    },
    close() {
      this.editCustomCodeDialog = false
      this.getSkuPageList()
    },
    closeDialog(formName) {
      this.$refs[formName].resetFields()
    },
    cancel() {
      this.PrintBarcodeDialog = false
      this.isShow = false
    },
    cancels(){
      this.skuSizeDialog=false;
    },
    pageNoChange(newPage) {
      this.queryParams.pageNo = newPage
      this.getSkuPageList()
    },
    handleSizeChange(pageSize) {
      this.queryParams.pageSize = pageSize
      this.queryParams.pageNo = 1
      this.getSkuPageList()
    },
    indexAdd(index) {
      const page = this.queryParams.pageNo // 当前页码
      const pagesize = this.queryParams.pageSize // 每页条数
      return index + 1 + (page - 1) * pagesize
    },
    infoClose() {
      this.detailDialog = false
    },
    getSkuSize(row){
      const skuId=row.goodsId;
      getSkUSize(skuId).then(response=>{
        this.title="修改sku体积"
        this.skuSizeDialog=true
        this.form=response.data
      })
    },
    getSkuLogs(row){
      const skuId =row.goodsId;
      getSkuLog(skuId).then(response=>{
          this.skuList=response.data;
          this.skuSizeLogDialog=true
      })
    },
    submitForm(){
      console.log(this.form)
      updateSkuSize(this.form).then(resonse=>{
        this.$message({
          message: '修改成功',
          type: 'success'
        })
        this.skuSizeDialog=false
        this.getSkuPageList()
        this.$ref.form.resetFields()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep rect[属性样式] {
  width: "500px";
}
</style>
